<template>
    <div class="btn-group">
        <el-button type="primary" size="small" v-if="showBtn.includes('summyList')" class="to-table"
                   @click="toSummyList">汇总列表
        </el-button>
        <el-button type="primary" size="small" v-if="showBtn.includes('goBack')" class="go-back" @click="goBack"
                   icon="el-icon-back">返回
        </el-button>
        <el-button type="primary" size="small" v-if="showBtn.includes('toUpload')" class="to-upload" @click="toUpload"
                   icon="el-icon-el-icon-upload" v-auth="{code: uploadCode}">上传
        </el-button>
        <el-button type="primary" size="small" v-if="showBtn.includes('toExport')" class="to-export" @click="toExport"
                   icon="el-icon-upload2" v-auth="{code: exportCode}">导出数据
        </el-button>
    </div>
</template>

<script>
    export default {
        name: 'index',
        props: ['showBtn', 'listUrl', 'code'],
        data () {
            return {
                // 上传按钮编码
                uploadCode: '',
                // 导出按钮编码
                exportCode: ''
            }
        },
        created () {
            if (this.code) {
                this.uploadCode = this.code.uploadCode || -1
                this.exportCode = this.code.exportCode || -1
            }
        },
        methods: {
            /**
             * 跳汇总列表
             */
            toSummyList () {
                this.$router.push(this.listUrl)
            },
            /**
             * 返回
             */
            goBack () {
                this.$router.go(-1)
            },
            /**
             * 上传
             */
            toUpload () {
                this.$emit('toUpload')
            },
            /**
             * 导出
             */
            toExport () {
                this.$emit('toExport')
            }
        }
    }
</script>

<style scoped lang="scss">
    button {
        min-width: 80px;
        i {
            margin-right: 5px;
        }
        &.to-table, &.to-upload {
            background: #409EFF;
            border-color: #409EFF;
            &:hover {
                background: #66b1ff;
                border-color: #66b1ff;
            }
        }
        &.go-back, &.to-export {
            color: #409EFF;
            background: #ecf5ff;
            border-color: #b3d8ff;
            &:hover {
                background: #409EFF;
                border-color: #409EFF;
                color: #fff;
            }
        }
    }
</style>
